<template>
  <div class="table">
    <ul class="table-header">
      <li v-for="(item, index) in tableHeader" :key="index">{{item.name}}</li>
      <!-- <li class="item-stress">地区</li>
      <li class="item-stress">当天</li>
      <li>当日</li>
      <li>较前日增加</li>
      <li>较前日增幅</li> -->
    </ul>
    <ul class="table-body">
      <li v-for="(item, index) in data" :key="index" class="table-province">
        <div class="item-stress">{{item.name}}</div>
        <div class="item-stress">{{item.today.confirm}}</div>
        <div>{{item.total.confirm}}</div>
        <div>{{item.total.heal}}</div>
        <div>{{item.total.dead}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tableHeader: Array,
    data: [Object, Array]
  }
}
</script>
<style lang="less" scoped>
  .table {
    .table-header {
      color: #D0021B;
      background: #FDF8F8;
      display: flex;
      > li {
        flex: 1;
        text-align: center;
        font-size: 14px;
        height: 45px;
        line-height: 45px;
      }
    }
    .table-body {
      li {
        width: 100%;
        border-bottom: 1px solid #E9E9E9;
        font-size: 0;
        > div {
          display: inline-block;
          width: 20%;
          text-align: center;
          font-size: 12px;
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
</style>